<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<script>
		$(function(){
			$("#dd li").mouseover(function(){
				var index=$(this).index()
				//alert($("#dd li").length)
				//在#dd li是个数组；dd 下的li 来激活其他事件、
				$("#dd li").css('background','yellow').eq(index).css("background","#F00");		
				$("#pp div").eq(index).addClass("bai");
				
			});
			$("#dd li").mouseout(function(){
				
				$("#pp div").removeClass("bai");
				$("ul li").css("background","yellow")
			
			$("#pp div").mouseover(function(){
				var yu=$(this).index()
				$(this).addClass('bai');
				//this 划过#pp div 元素时  当前的索引；把this替换#pp div 是全部的#pp div下的元素 
				//添加 类 ；
				$("ul li").eq(yu).css("background","#F00")	
			});
			$("#pp div").mouseout(function(){
				$(this).removeClass('bai');
				
			})
			
			
			
		});
			
		})(jQuery)
		
		
	
</script>
</head>
<style>
	html, body, ul, li, ol, dl, dd, dt, p, form, fieldset, legend,h1, h2, h3, h4, h5, h6, img {margin:0; padding:0;} 
html,body{width:100%}
fieldset,img{border:none;} 
img{display: block;} 
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; } 
ul, ol { list-style:none; } 
a{text-decoration:none; }
h1, h2, h3, h4, h5, h6{font-weight:normal;}


	#dd{width:100px;height:500px;float:left;background:#FF6}
	#dd li{float:left;width:100px;height:49px;border-bottom:1px solid #F00}	
	#pp div{width:300px;height:500px;float:left;background:#0F3;}
	#pp div{display:none}
	#pp	.bai{width:300px;height:500px;display:block;background:#0C9}
	
</style>
<body>
	
    	<ul id="dd">
        	<li>1</li>
            <li>2</li>
            <li></li>
            <li></li>
            <li>5</li>
            <li></li>
            <li></li>
            <li>8</li>
             <li></li>
            <li>10</li>
        </ul>
        <div id="pp">
    	<div>111111111</div>	
        <div>222222222</div>
        <div>333333333</div>
        <div>444444444</div>
        <div>555555555</div>
        <div>666666666</div>
        <div>777777777</div>
        <div>888888888</div>
        <div>999999999</div>
        <div>1010101010</div>											    																																													
       </div>
   
</body>
</html>
